TL;DR

• Flex 子项的最小尺寸默认不是 0，而是浏览器的“自动最小尺寸”（auto min-size），常常 ≈ 内容的最小内容大小（min-content size）。
• 这会导致：子项即使写了 flex:1、width:100%，仍然撑不满或挤不动，出现溢出、滚动条、换行异常。
• 在复杂嵌套（多层 flex / 绝对定位子层 / 带 padding/gap/overflow）中，这个行为更显著。
• 显式设置：min-width: 0; min-height: 0;（或 Tailwind 的 min-w-0 min-h-0）即可关闭自动最小尺寸约束，让子项按可用空间自由收缩/拉伸。

---

这坑从哪来？——“自动最小尺寸”简述

• 规范里规定：Flex items 在排版时有一个最小主轴尺寸，默认是 auto。
• auto 会退化到“最小内容大小”，即容纳内容不换行、不压缩的最小宽/高。
• 结果：当容器可用空间小于子项的最小内容大小时，子项拒绝收缩，宁可溢出或把兄弟项挤飞。

直观理解：浏览器默认“心疼”文字和内联内容，不愿意把它们压扁到看不清；但是我们做应用布局时往往更在乎容器占满与自适应。

---

何时必加 min-w-0 / min-h-0？

• 横向滚动条/内容溢出：父是 display:flex 的横向布局，某个子项放了表格/图表/代码区，怎么都挤不回去。
• 宽度不随父收缩：右侧面板收起后，中间主面板没有占满（像你 K 线图场景）。
• 多层嵌套：flex 里套 flex、内部还有 position:absolute 的图层（Canvas/K 线/地图）时，尺寸计算更容易被最小内容大小“卡住”。
• 带 overflow:auto/hidden 的祖先：滚动容器 + flex 混合，最小内容大小常导致滚动条意外出现。

---

最小可运行示例

问题复现

<div class="flex w-[600px] border">
  <div class="w-48 bg-gray-200">侧栏</div>
  <div class="flex-1 bg-gray-100">
    <!-- 长内容导致最小内容宽度很大，主区不收缩，引发溢出/滚动 -->
    <div class="whitespace-nowrap">VeryVeryLongUnbreakableContent_____</div>
  </div>
</div>

效果：主区不收缩，超出 600px 出现溢出/滚动。

一行修复

<div class="flex w-[600px] border">
  <div class="w-48 bg-gray-200">侧栏</div>
  <div class="flex-1 bg-gray-100 min-w-0">
    <div class="whitespace-nowrap overflow-hidden text-ellipsis">
      VeryVeryLongUnbreakableContent_____
    </div>
  </div>
</div>

• min-w-0 让主区允许小于“最小内容宽度”，从而把长内容交给 overflow/ellipsis 处理。
• 同理，纵向容器常用 min-h-0：

<div class="flex flex-col h-[400px] border">
  <div class="h-12 bg-gray-200">头</div>
  <div class="flex-1 min-h-0 bg-gray-50 overflow-auto">
    <!-- 这里若不加 min-h-0，内部滚动容器可能拿不到可用高度 -->
    <div class="h-[800px]">长内容滚动区</div>
  </div>
</div>

---

在你的场景怎么写（K 线图 / Split 布局）

<!-- 外层：确保 flex 子项可收缩 -->
<div class="w-full h-full flex flex-col">
  <div class="flex-1 min-w-0 min-h-0 overflow-hidden">
    <!-- ChartPanel：组件根上也建议加 -->
    <div class="w-full h-full flex-1 min-w-0 min-h-0 overflow-hidden">
      <!-- 图表容器：100% 填充 + 绝对定位子层 -->
      <div class="relative w-full h-full">
        <!-- K 线库内部会创建 absolute 的 div/canvas -->
      </div>
    </div>
  </div>
</div>

配合你已有的：

• Split.js 更新 flex-basis 后，min-w-0/min-h-0 保证中间面板能按新空间收缩。
• ResizeObserver/ref.resize() 负责通知图表重算尺寸。

---

常见误区与对照表

误区	现象	正解
只写 flex:1 就够了	仍溢出/不收缩	补 min-w-0（横向）或 min-h-0（纵向）
用 width:100%/height:100% 顶上	子项拿不到“有效 100%”	100% 依赖父的“内容盒”尺寸，先让父能收缩/撑满
给子项加 overflow:hidden 就能好	滚动条没了但内容还是挤不动	overflow 只控制裁剪，不改变最小内容限制，需配 min-w-0/min-h-0
只在图表容器上加	仍不生效	逐层检查 flex 祖先，任何一层卡住都要加

---

调试 checklist

1. 打开 DevTools → 选中疑似“卡住”的子项，查看 Computed → min-width/min-height 是否为 auto。
2. 看布局：父是不是 display:flex？主轴方向是哪边？（横向看 min-w-0，纵向看 min-h-0）
3. 查祖先链：是否存在 多层 flex 或 overflow 容器？逐层尝试加 min-w-0/min-h-0。
4. 有长不可断内容（如 white-space:nowrap、长链接、代码块）？那就是“最小内容大小”变大的元凶。
5. 修完尺寸后，再考虑 overflow: hidden/auto 与文本省略。

---

与 Grid 的对比

• Grid 子项也有“自动最小尺寸”，在 列方向 同样会触发类似问题。修法与 Flex 一样：min-width:0 或在容器上用 minmax(0, 1fr)。

/* Grid 容器建议用 minmax(0, 1fr) 避免列最小内容宽度卡住 */
grid-template-columns: 240px minmax(0, 1fr);

---

何时不该乱加？

• 文本阅读型页面：如果你希望保持可读性、不想压缩文字到难以识别，别全站一刀切 min-w-0。
• 表单/输入框：过度压缩会影响可用性，按需控制最小宽度。

---

结语

在应用级布局里，min-w-0 / min-h-0 是“让布局回到你掌控”的开关。 一旦遇到“flex 子项怎么都不肯缩”的离谱行为，先试着加上它们，十有八九就通了。